<template>
  <section class="page-container">
    <section class="options-wrap">
      <el-radio-group
        v-model="radioValue"
        @change="radioValueChange"
      >
        <el-radio-button value="5654caa8e04ed504f529c4ba33e887c9">
          4号煤层采掘工程平面图
        </el-radio-button>
        <el-radio-button value="newBasketballCourt">
          篮球场
        </el-radio-button>
        <el-radio-button value="c0d4dda2073e">
          江苏同方机械制造有限公司
        </el-radio-button>
        <el-radio-button value="19cf2ce3f29e8f8e580368de2cffc8cb">
          进出水供给平面图
        </el-radio-button>
      </el-radio-group>

      <el-popover
        placement="bottom-start"
        title=""
        :width="350"
        trigger="hover"
      >
        <p>
          唯杰地图(VJMAP)是为用户自定义地图格式WebGIS可视化显示开发提供的一站式解决方案，
          支持的格式如常用的AutoCAD的DWG格式文件、GeoJSON等常用GIS文件格式，
          它使用WebGL矢量图块和自定义样式呈现交互式地图，
          提供了全新的大数据可视化、实时流数据可视化功能，
          通过本产品可快速实现浏览器和移动端上美观、流畅的地图呈现与空间分析，
          可帮助您在网站中构建功能丰富、交互性强、可定制的地图应用。
          <el-link
            href="https://vjmap.com/guide/"
            type="primary"
            target="_blank"
          >
            帮助文档
          </el-link>
        </p>
        <template #reference>
          <el-icon class="hover">
            <info-filled />
          </el-icon>
        </template>
      </el-popover>
    </section>

    <section
      id="map-container"
      ref="mapContainer"
    />
  </section>
</template>

<script lang="ts">
import {
  defineComponent, nextTick, onMounted, onUnmounted, ref,
} from 'vue';

import { InfoFilled } from '@element-plus/icons-vue';
import vjmap from 'vjmap';
import 'vjmap/dist/vjmap.min.css';

let map:any = null;
export default defineComponent({
  name: 'CadPreview',
  components: {
    InfoFilled,
  },
  setup() {
    const mapContainer = ref();
    const radioValue = ref('5654caa8e04ed504f529c4ba33e887c9');
    const initMap = async(exampleMapId:string) => {
      const env = {
        serviceUrl: 'https://vjmap.com/server/api/v1',
        // eslint-disable-next-line max-len
        accessToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJJRCI6MSwiVXNlcm5hbWUiOiJyb290MSIsIk5pY2tOYW1lIjoicm9vdDEiLCJBdXRob3JpdHlJZCI6InJvb3QiLCJCdWZmZXJUaW1lIjo4NjQwMCwiZXhwIjoxOTQyMzA1MjQxLCJpc3MiOiJ2am1hcCIsIm5iZiI6MTYyNjk0NDI0MX0.29OAA4Cnjtw780VxIxWqduLtszp1EtpSNHAmWjiL_OM',
        exampleMapId,
      };
        // 地图服务对象
      const svc = new vjmap.Service(env.serviceUrl, env.accessToken);
      // 打开地图
      const res = await svc.openMap({
        mapid: env.exampleMapId, // 地图ID
        mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
        style: vjmap.openMapDarkStyle(), // div为深色背景颜色时，这里也传深色背景样式
      });
      if (res.error) {
        // 如果打开出错
        console.error(res.error);
        return;
      }

      // 获取地图范围
      const mapExtent = vjmap.GeoBounds.fromString(res.bounds);
      // 根据地图范围建立几何投影坐标系
      const prj = new vjmap.GeoProjection(mapExtent);

      // 地图对象
      map = new vjmap.Map({
        container: 'map-container', // DIV容器ID
        style: svc.vectorStyle(), // 样式，这里是栅格样式
        center: prj.toLngLat(mapExtent.center()), // 设置地图中心点
        zoom: 1, // 设置地图缩放级别,
        pitch: 0, // 倾斜角度
        renderWorldCopies: false, // 不显示多屏地图
      });
      // 关联服务对象和投影对象
      map.attach(svc, prj);
      /*
         *  根据地图本身范围缩放地图至全图显示
         * map.fitMapBounds();
         */
      await map.onLoad(); // 等待地图加载完成
    };

    const radioValueChange = (val:any) => {
      // 清除原来画布中的内容;
      const canvas = document.querySelectorAll('canvas');
      if (canvas[0]) {
        canvas[0].remove();
      }
      mapContainer.value.innerHtml = null;
      nextTick(() => {
        initMap(val);
      });
    };

    onMounted(() => {
      initMap(radioValue.value);
    });

    onUnmounted(() => {
      if (map) {
        map.remove();
      }
    });
    return {
      mapContainer,
      radioValue,
      radioValueChange,
    };
  },
});
</script>
<style lang="scss" scoped>
  .page-container {
    position: relative;
    height: 100%;
    padding: 0;

    .options-wrap {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .hover {
        margin-left: 10px;
        font-size: 18px;
        color: #fff;
        cursor: pointer;
      }
    }
  }

  #map-container {
    position: absolute;
    inset: 0;
    background: #022b4f;
  }
</style>
